<template>
	<view>
		<view class="" style="background-color: transparent;" @tap="addClick">
			<view class="cu-form-group">
				<view v-if="fileUrl" class="bg-img">
					<image :src="fileUrl" mode="aspectFill" :style="'width:'+width+';height:'+height"></image>
					<view class="cu-tag bg-red text-xs" v-if="isShowDel == true"  @tap.stop="delClick(fileUrl)">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="bg-img" v-else>
					<image :src="defaultImg" :style="'width:'+width+';height:'+height" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gz-upfile-one",
		props: {
			rootPath: {
				type: String,
				required: true,
				default: "",
			},
			value: {
				type: [String],
				default: []
			},
			defaultImg:{
				default:"/static/login/photo.png"
			},
			isShowDel:{
				type: Boolean,
				default: true
			},
			width:{
				default:"210rpx"
			},
			height:{
				default:"210rpx"
			}
		},
		data() {
			return {
				fileUrl: ""
			};
		},
		watch: {
			value(newVal, oldVal) {
				console.log(newVal, oldVal)
				this.fileUrl = newVal
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.fileUrl = this.value
			})
		},
		methods: {
			yulanClick(item) {
				uni.previewImage({
					urls: [this.fileUrl],
					current: 0
				});
			},
			addClick() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.upFile(res.tempFilePaths)
					}
				})
			},
			upFile(files) {
				uni.$api.upFile({
					file: files[0],
					rootPath: this.rootPath.toLowerCase(),
					isToast: false
				}).then(data => {
					this.fileUrl = data.url;
					this.change()
					uni.$common.toastSuc("已上传")
				})
			},
			delClick(item) {
				this.fileUrl = ""
				this.change()
			},
			change() {
				this.$emit("input", this.fileUrl)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.cu-form-group {
		background-color: transparent;
		padding: 0upx 0upx;
		display: flex;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}
</style>
